<template>
  <div class="big-card">
    <div class="card-top">
      <div class="card-top-menu">
        <div class="top-menu-left" @click="menuId(0)" :class="{active:menu==0}">上传视频</div>
        <div class="top-menu-right" @click="menuId(1)" :class="{active:menu==1}">上传图文</div>
      </div>
    </div>
    <div class="card-body" v-if="menu==0">
      <fabu-video style="margin: 20px;"></fabu-video>
    </div>
    <div class="card-body" v-if="menu==1">
<fabu-img style="margin: 20px;"></fabu-img>
    </div>
  </div>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import fabuVideo from '../fabu/fabuVideo.vue';
import fabuImg from './fabuImg.vue';

const menu=ref(0)
const menuId=(id: number)=>{
  menu.value=id
}
</script>
<style scoped>
/* *{
  background-color: #aa0000;
} */
.big-card{
  margin:2% 0 2% 2.5%;
  /* padding-bottom: 2%; */
  /* margin-bottom: 2%; */
  width: 95%;
  background-color: rgb(255, 255, 255);
  height: auto;
  border-radius: 10px;
  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.295);
}
.card-top{
  width: 100%;
  height: 54px;
  /* background-color: aquamarine; */
  border-bottom: 1.5px solid rgba(170, 170, 170, 0.226);
}
.card-top-menu{
  width: 200px;
  height: 100%;
  margin-left: 25px;
  display: flex;
  flex-direction: row;
  /* background-color: yellowgreen; */
}
.top-menu-left{
  width: auto;
  height: 52px;
  color: #acacac;
  /* background-color: aqua; */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* border-bottom: 3px solid rgba(0, 238, 255, 0.822); */
}

.top-menu-right{
  width: auto;
  height: 52px;
  color: #acacac;
  /* background-color: aqua; */
  cursor: pointer;
  margin-left: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top-menu-right.active{
  color: rgba(16, 166, 177, 0.822);
  border-bottom: 3px solid rgba(0, 238, 255, 0.822);
}
.top-menu-left.active{
  color: rgba(16, 166, 177, 0.822);
  border-bottom: 3px solid rgba(0, 238, 255, 0.822);
}
.card-body{
  width: 100%;
  display: flex;
  height: auto;
  /* background-color: rgba(177, 16, 16, 0.815); */
}
</style>